<template>
  <div>
    <div class="radio-item" :class="[{ selected: rindex === index }]" v-for="(item, index) in btns" :key="index" @click="handleClick(item, index)">
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      btns: [],
      rindex: null
    }
  },
  watch: {
    list: {
      handler(v) {
        this.btns = v
      },
      immediate: true
    }
  },
  methods: {
    handleClick(item, index) {
      this.rindex = index
      this.$emit('input', item.value)
      this.$emit('change', { item, index })
    },
    clean() {
      this.rindex = null
      this.$emit('input', '')
    }
  }
}
</script>
<style lang="scss" scoped>
.radio-item {
  display: inline-block;
  height: 28px;
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 10px;
  font-size: 14px;
  margin: 4px 12px 4px 0;
  height: 36px;
  line-height: 18px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  cursor: pointer;

  &.disable {
    background: #f0f2f5;
    color: #999999;
    &:hover,
    &:focus {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #ebeef5;
    }
  }
  &:hover,
  &:focus {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
  &.selected {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}
</style>
